
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>文档</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="{:C("WWW")}static/css/style.css">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src=" http://libs.baidu.com/json/json2/json2.js"></script>
    <script>
    var data = {$data};
    </script>
  </head>

  <body style="overflow:hidden">

    <include file="_inc_:header" />

    <div class="main_pannel">
      <div class="main_left_pannel" id="left_pannel" scroll>
        
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>{$_GET['key']|default='function name'}</title>
          <link href="{:C('WWW')}/static/gen/css/bootstrap.min.css" rel="stylesheet">
          <link href="{:C('WWW')}/static/gen/css/docs.min.css" rel="stylesheet">
          <link href="{:C('WWW')}/static/gen/css/style.css" rel="stylesheet">
          <script src="{:C('WWW')}/static/gen/js/jquery.min.js"></script>
          <script src="{:C('WWW')}/static/gen/js/bootstrap.min.js"></script>
          
          <link type="text/css" rel="stylesheet" href="{:C('WWW')}/static/gen/css/sh_rand01.min.css">
          <script type="text/javascript" src="{:C('WWW')}/static/gen/js/sh_main.js"></script>
          <script type="text/javascript" src="{:C('WWW')}/static/gen/js/sh_c.js"></script>
          
        </head>
        <body>
          <h1>{$_GET['key']|default='function name'}</h1>
          <div class="bs-callout bs-callout-info">
            <p>
              <h4>函数声明</h4>
              <div id="l_1"></div>
            </p>
            <p>
              <h4>头文件</h4>
              <div id="l_2"></div>
            </p>
            <p>
              <h4>函数功能</h4>
              <div id="l_3"></div>
            </p>
            <p>
              <h4>参数</h4>
              <div id="l_4"></div>
            </p>
            <p>
              <h4>返回值</h4>
              <div id="l_5"></div>
            </p>
          </div>
          
          <div class="bs-callout bs-callout-green">
            <p>
              <h4>函数说明</h4>
              <div id="l_6"></div>
            </p>
          </div>
          
          <div class="bs-callout bs-callout-warning">
          <p>
            <h4>注意事项</h4>
            <div id="l_7"></div>
          </p>
          </div>
          
          <div class="panel panel-default">
          <div class="panel-heading"><b>代码示例</b></div>
          <pre class="sh_c" id="l_8">

          </pre>
          </div>
        </body>
        </html>

      </div>
      <div class="main_right_content" id="right_pannel" >
        
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>{$_GET['key']|default='function name'}</title>
          <link href="{:C('WWW')}/static/gen/css/bootstrap.min.css" rel="stylesheet">
          <link href="{:C('WWW')}/static/gen/css/docs.min.css" rel="stylesheet">
          <link href="{:C('WWW')}/static/gen/css/style.css" rel="stylesheet">
          <script src="{:C('WWW')}/static/gen/js/jquery.min.js"></script>
          <script src="{:C('WWW')}/static/gen/js/bootstrap.min.js"></script>
          

          <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.css">
          <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.min.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/clike/clike.js"></script>
          
        </head>
        <body onload="sh_highlightDocument();">
          <h1>{$_GET['key']|default='function name'}</h1>
          <div class="bs-callout bs-callout-info">
            <p>
              <h4>函数声明</h4>
              <div contenteditable="true" class="editor" id="r_1"></div>
            </p>
            <p>
              <h4>头文件</h4>
              <div contenteditable="true" class="editor" id="r_2"></div>
            </p>
            <p>
              <h4>函数功能</h4>
              <div contenteditable="true" class="editor" id="r_3"></div>
            </p>
            <p>
              <h4>参数</h4>
              <div contenteditable="true" class="editor" id="r_4"></div>
            </p>
            <p>
              <h4>返回值</h4>
              <div contenteditable="true" class="editor" id="r_5"></div>
            </p>
          </div>
          
          <div class="bs-callout bs-callout-green">
            <p>
              <h4>函数说明</h4><small>使用HTML语法, 支持Bootstrap标签和class</small>
              <textarea contenteditable="true" class="editor" id="r_6"></textarea>
            </p>
          </div>
          
          <div class="bs-callout bs-callout-warning">
            <p>
              <h4>注意事项</h4><small>使用HTML语法, 支持Bootstrap标签和class</small>
              <textarea contenteditable="true" class="editor" id="r_7"></textarea>
            </p>
          </div>
          
          <div class="panel panel-default">
          <div class="panel-heading"><b>代码示例</b></div>
          <textarea id="r_8"></textarea>
          </div>
        </body>
        </html>

      </div>
    </div>
    
  </body>
</html>
<script>
$(document).ready(function(e){

  function save_data_local(){
    var data_string = JSON.stringify(data);
    localStorage[data.name] = data_string;
  }

  function HtmlEncode(text){ 
    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); 
  }
  function HtmlDecode(text){ 
    return text.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>'); 
  }

  var editor = CodeMirror.fromTextArea(document.getElementById("r_8"), {
    mode: 'text/x-csrc',
    styleActiveLine: true,
    lineNumbers: true,
    lineWrapping: true,
    autoCloseTags: true,
    showCursorWhenSelecting: true,
    theme:'default',
  });

  editor.on("change", function() {
    $("#l_8").html(HtmlEncode(editor.doc.getValue()));
    data.f_demos = HtmlEncode(editor.doc.getValue());
    save_data_local();
  });
  
  function resize_event() {
    var doc_h = $(window).height() - 50;
    $(".main_pannel").css("height",doc_h);
  }
  
  function contentchange_event() {
    $("#l_1").html($("#r_1").html());
    data.f_declaration = $("#r_1").html();

    $("#l_2").html($("#r_2").html());
    data.f_include = $("#r_2").html();

    $("#l_3").html($("#r_3").html());
    data.f_function = $("#r_3").html();

    $("#l_4").html($("#r_4").html());
    data.f_parms = $("#r_4").html();

    $("#l_5").html($("#r_5").html());
    data.f_returns = $("#r_5").html();

    $("#l_6").html($("#r_6").val());
    data.f_description = $("#r_6").html();

    $("#l_7").html($("#r_7").val());
    data.f_warning = $("#r_7").html();

    save_data_local();

    sh_highlightDocument();
  }

  // override current content with last edit
  if(localStorage[data.name]){
    if(confirm("是否加载上次内容？")){
      data = eval('['+localStorage[data.name]+']')[0];
      load_data();
      contentchange_event();
    }else{
      load_data();
      contentchange_event();
    };
    console.log(data);
  }

  resize_event();
  

  $(window).resize(function(){
    resize_event();
  });

  $(".main_right_content").delegate("div","keyup",function(){
    contentchange_event();
  });

  $(".main_right_content").scroll(function(e){
    var x = $(".main_right_content").eq(0).scrollLeft();
    var y = $(".main_right_content").eq(0).scrollTop();

    $(".main_left_pannel").eq(0).scrollLeft(x);
    $(".main_left_pannel").eq(0).scrollTop(y);
    
  });

  // load data
  function load_data(){
    $("#l_1").html(data.f_declaration);
    $("#r_1").html(data.f_declaration);

    $("#l_2").html(data.f_include);
    $("#r_2").html(data.f_include);

    $("#l_3").html(data.f_function);
    $("#r_3").html(data.f_function);

    $("#l_4").html(data.f_parms);
    $("#r_4").html(data.f_parms);

    $("#l_5").html(data.f_returns);
    $("#r_5").html(data.f_returns);

    $("#l_6").html(data.f_description);
    $("#r_6").val(data.f_description);

    $("#l_7").html(data.f_warning);
    $("#r_7").val(data.f_warning);

    editor.doc.setValue(HtmlDecode(data.f_demos));
    $("#l_8").html(data.f_demos);
  }
  
});
  
</script>